<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Eason介绍首页</title>
    <link rel="stylesheet" href="../CSS/base.css">
    <link rel="stylesheet" href="../CSS/commonhead.css">
    <link rel="stylesheet" href="../CSS/index.css">
    <link rel="stylesheet" href="../mouse.css">
    <script src="../JS/indexlunbo.js"></script>
    <script src="../JS/animation.js"></script>

</head>

<body>
    <script src="../JS/commonhead.js"></script>
    <div class="cursor"></div>
    <div class="index-all w">
        <section class="index-first">
            <div class="index-top">
                <div class="index-top_pic1">
                    <div class="index-top_picfront1"></div>
                    <div class="index-top_picright1">
                        <img src="../images/index/home3/typical album1.png" alt="">
                        <div class="index-top_pic1word">
                            <div class="index-top_picword1">What's Going On…?</div>
                            <div class="index-top_picword2">2006-11-23</div>
                            <div class="index-top_picword3">词曲则由李焯雄、周博贤、黄伟文、林夕等 人完成</div>
                            <a href="../HTML/yuealbum.html" class="index-top_picto">粤语专区</a>
                        </div>
                    </div>
                </div>
                <div class="index-top_pic2">
                    <div class="index-top_picfront2"></div>
                    <div class="index-top_picright2">
                        <img src="../images/index/home3/typical album2.png" alt="">
                        <div class="index-top_pic1word">
                            <div class="index-top_picword1">认了吧</div>
                            <div class="index-top_picword2">2004-04-24</div>
                            <div class="index-top_picword3">词曲则由C.Y.Kong、方文山、周杰伦、林夕等人完成</div>
                            <a href="../HTML/guoalbum.html" class="index-top_picto">国语专区</a>
                        </div>
                    </div>
                </div>
                <div class="index-top_eason">
                    <svg width="226" height="231" viewBox="0 0 226 231" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path class="e1"
                            d="M40.8611 86.181L26.4212 71.6016L29.1836 69.1101L40.5554 80.5918L46.7337 75.0194L36.0374 64.2199L38.7999 61.7284L49.4961 72.528L56.2388 66.4466L44.3885 54.4818L47.1509 51.9903L62.0693 67.0529L40.8611 86.181Z"
                            fill="white" fill-opacity="0.5" />
                        <path class="e2"
                            d="M58.6817 64.9245L48.6349 47.0322L51.9496 45.3436L59.8617 59.4342L67.2751 55.6574L59.833 42.4039L63.1477 40.7153L70.5897 53.9688L78.6803 49.847L70.4353 35.1635L73.7499 33.4749L84.1297 51.96L58.6817 64.9245Z"
                            fill="white" fill-opacity="0.5" />
                        <path class="e3"
                            d="M83.7044 47.6071L81.3305 27.2249L85.0308 26.8429L86.9003 42.8943L95.1764 42.0399L93.4179 26.942L97.1182 26.5599L98.8767 41.6579L107.909 40.7254L105.96 23.9985L109.661 23.6164L112.113 44.6741L83.7044 47.6071Z"
                            fill="white" />
                        <path class="e4"
                            d="M115.526 40.7342L118.964 20.5041L122.638 21.0832L119.931 37.0149L128.15 38.3101L130.696 23.3248L134.371 23.9039L131.824 38.8892L140.794 40.3027L143.615 23.7006L147.289 24.2797L143.738 45.1802L115.526 40.7342Z"
                            fill="white" />
                        <path class="e5"
                            d="M143.999 46.7693L153.986 28.8434L157.3 30.5324L149.436 44.6494L156.849 48.4269L164.246 35.1485L167.561 36.8374L160.163 50.1159L168.253 54.2384L176.449 39.5273L179.764 41.2162L169.446 59.7361L143.999 46.7693Z"
                            fill="white" fill-opacity="0.5" />
                        <path class="e6"
                            d="M168.796 62.8545L183.284 48.3232L186.037 50.8246L174.627 62.2685L180.786 67.8632L191.518 57.0992L194.271 59.6006L183.539 70.3646L190.259 76.4704L202.149 64.545L204.903 67.0465L189.934 82.0594L168.796 62.8545Z"
                            fill="white" fill-opacity="0.5" />
                        <path class="a1"
                            d="M96.8912 108.713L92.4314 108.907L81.2334 83.6664L85.4414 83.4833L88.188 89.9939L99.2296 89.5135L101.302 82.7932L105.474 82.6117L96.8912 108.713ZM98.2075 92.8009L89.5397 93.178L94.3751 104.606L94.519 104.6L98.2075 92.8009Z"
                            fill="white" />
                        <path class="a2"
                            d="M145.523 108.08L141.063 108.274L129.865 83.0335L134.073 82.8505L136.82 89.361L147.862 88.8807L149.934 82.1604L154.107 81.9789L145.523 108.08ZM146.84 92.1681L138.172 92.5452L143.007 103.974L143.151 103.967L146.84 92.1681Z"
                            fill="white" />
                        <path class="s1"
                            d="M119.514 125.993C117.835 126.066 116.519 125.77 115.564 125.104C114.527 124.415 113.903 123.294 113.69 121.742L115.848 121.648C116.096 122.585 116.503 123.235 117.069 123.597C117.636 123.986 118.459 124.157 119.538 124.11C120.471 124.07 121.183 123.899 121.675 123.597C122.271 123.251 122.551 122.718 122.514 121.999C122.482 121.36 122.103 120.869 121.378 120.527C121.022 120.342 120.181 120.085 118.856 119.756C116.853 119.229 115.584 118.817 115.048 118.52C113.785 117.828 113.12 116.829 113.053 115.524C112.989 114.259 113.437 113.232 114.398 112.443C115.361 111.68 116.741 111.26 118.539 111.182C120.258 111.107 121.634 111.394 122.668 112.043C123.883 112.831 124.596 114.121 124.808 115.914L122.65 116.008C122.432 114.883 121.992 114.094 121.328 113.643C120.719 113.229 119.822 113.048 118.637 113.099C117.585 113.145 116.735 113.369 116.088 113.771C115.467 114.158 115.172 114.671 115.205 115.31C115.245 116.096 115.73 116.702 116.659 117.129C117.001 117.274 117.963 117.553 119.546 117.964C121.36 118.459 122.472 118.804 122.882 119C124.008 119.605 124.603 120.533 124.666 121.785C124.73 123.037 124.254 124.045 123.238 124.81C122.274 125.533 121.032 125.927 119.514 125.993Z"
                            fill="white" />
                        <path class="o1"
                            d="M120.6 169.047C116.258 169.236 112.763 167.973 110.114 165.259C107.581 162.7 106.202 159.211 105.977 154.79C105.756 150.449 106.775 146.868 109.034 144.047C111.396 141.142 114.748 139.594 119.091 139.405C123.433 139.217 126.929 140.479 129.577 143.193C132.085 145.78 133.449 149.244 133.67 153.585C133.893 157.952 132.887 161.533 130.653 164.326C128.347 167.282 124.996 168.856 120.6 169.047ZM120.405 165.212C123.469 165.079 125.774 163.951 127.322 161.828C128.821 159.815 129.486 157.13 129.315 153.774C129.146 150.472 128.213 147.87 126.514 145.969C124.706 144.019 122.297 143.11 119.286 143.24C116.249 143.373 113.955 144.46 112.403 146.503C110.877 148.518 110.2 151.216 110.373 154.598C110.545 157.981 111.494 160.635 113.221 162.562C114.947 164.462 117.341 165.345 120.405 165.212Z"
                            fill="white" />
                        <path class="n1"
                            d="M92.6924 183.016L90.4945 183.111L82.6612 172.822L82.5813 172.826L83.1214 183.432L80.9435 183.527L80.2172 169.265L82.3352 169.173L90.2545 179.578L90.3344 179.575L89.7881 168.849L91.9661 168.754L92.6924 183.016Z"
                            fill="white">
                        </path>
                        <path class="n2"
                            d="M92.6924 183.016L90.4945 183.111L82.6612 172.822L82.5813 172.826L83.1214 183.432L80.9435 183.527L80.2172 169.265L82.3352 169.173L90.2545 179.578L90.3344 179.575L89.7881 168.849L91.9661 168.754L92.6924 183.016Z"
                            fill="white">
                        </path>

                    </svg>
                </div>
                <span
                    class="index-top_word">每个人都是矛盾体。陈奕迅凭借随性不羁、鬼马搞怪的风格在香港乐坛独树一帜。但他的嗓音厚实中带着沙哑，唱腔慵懒且具有独特的个性，在唱歌那一刻又是如此深情。</span>
                <a href="../HTML/profile.html" class="index-top_more">更多</a>
            </div>
        </section>
        <section class="index-second">
            <div class="index-con">
                <span class="index-con_lettere1"></span>
                <span class="index-con_lettera1"></span>
                <span class="index-con_letters1"></span>
                <span class="index-con_lettero1"></span>
                <span class="index-con_lettern1"></span>
                <span class="index-con_lettere2"></span>
                <span class="index-con_lettera2"></span>
                <span class="index-con_letters2"></span>
                <span class="index-con_lettero2"></span>
                <span class="index-con_lettern2"></span>
                <div class="index-con_album">
                    <svg width="464" height="464" viewBox="0 0 464 464" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M403 1H423V21H443V41H463V463" stroke="white" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" />
                        <path d="M1 403V423H21V443H41V463H463" stroke="white" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" />
                    </svg>
                    <div class="index-con_albumtop">
                        <a href="../HTML/albumall.html" class="index-con_albumword">ALBUM</a>
                        <a href="../HTML/albumall.html" class="index-con_albumwordarrow"></a>
                    </div>
                    <div class="index-con_albumimg">
                        <div class="index-con_albumimgbox">
                            <a href="javascript:;" class="index-con_albumarrowl"></a>
                            <a href="javascript:;" class="index-con_albumarrowr"></a>
                            <ul class="index-con_albumlunbo">
                                <li class="index-con_album1"><img src="../images/index/ALBUM/ALBUM1.png" alt="">
                                </li>
                                <li class="index-con_album2"><img src="../images/index/ALBUM/ALBUM2.png" alt="">
                                </li>
                                <li class="index-con_album3"><img src="../images/index/ALBUM/ALBUM3.png" alt="">
                                </li>
                                <li class="index-con_album4"><img src="../images/index/ALBUM/ALBUM4.png" alt="">
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="index-con_news1">
                    <div class="index-con_newswordall">
                        <a href="../HTML/news.html" class="index-con_newsword">NEWS</a>
                        <a href="../HTML/news.html" class="index-con_newswordarrow">
                            <img src="../images/index/NEWS/news-arrow.png" alt="">
                        </a>
                    </div>
                    <div class="index-con_news1all">
                        <svg width="435" height="843" viewBox="0 0 435 843" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <rect x="26.5" y="26.5" width="408" height="816" stroke="#808080" />
                            <rect x="13.5" y="13.5" width="408" height="816" stroke="#808080" />
                            <rect x="0.5" y="0.5" width="408" height="816" stroke="white" />
                        </svg>
                        <img src="../images/index/NEWS/new1.png" class="index-con_news1pic"></img>
                        <div class="index-con_newsword1">
                            <div class="index-con_news1date">2021.11.09</div>
                            <div class="index-con_news1title">英雄联盟x陈奕迅联手打造《双城之战》中文主题曲《孤勇者》</div>
                            <div class="index-con_news1intro">11月8日英雄联盟官方携手陈奕迅官方正式公布英雄联盟首部动画剧集《双城之战》中文主题曲《孤勇者》正式上线...
                            </div>
                        </div>
                    </div>
                </div>
                <div class="index-con_news2">
                    <div class="index-con_news2all">
                        <svg width="435" height="843" viewBox="0 0 435 843" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <rect x="26.5" y="26.5" width="408" height="816" stroke="#808080" />
                            <rect x="13.5" y="13.5" width="408" height="816" stroke="#808080" />
                            <rect x="0.5" y="0.5" width="408" height="816" stroke="white" />
                        </svg>
                        <img src="../images/index/NEWS/new2.png" class="index-con_news1pic"></img>
                        <div class="index-con_newsword2">
                            <div class="index-con_news2date">2021.09.10</div>
                            <div class="index-con_news2title">陈奕迅、弗莱明、郎朗三大界别音乐天才携手呈献新歌《I Want……》</div>
                            <div class="index-con_news2intro">9月10日由流行天王陈奕迅、歌剧天后弗莱明Renée Fleming、国际钢琴大师郎朗携手演绎的单曲《I
                                Want…》正式上线。
                            </div>
                        </div>
                    </div>
                </div>
                <div class="index-con_news3">
                    <div class="index-con_news3all">
                        <svg width="435" height="843" viewBox="0 0 435 843" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <rect x="26.5" y="26.5" width="408" height="816" stroke="#808080" />
                            <rect x="13.5" y="13.5" width="408" height="816" stroke="#808080" />
                            <rect x="0.5" y="0.5" width="408" height="816" stroke="white" />
                        </svg>
                        <img src="../images/index/NEWS/new3.png" class="index-con_news3pic"></img>
                        <div class="index-con_newsword3">
                            <div class="index-con_news3date">2021.08.17</div>
                            <div class="index-con_news3title">陈奕迅倾情献唱电影主题曲 感受夏日般治愈系温暖</div>
                            <div class="index-con_news3intro">8月17日，Eason陈奕迅推出全新单曲《不期而遇的夏天》，这首歌同时也是作为电影《不期而遇的夏天》的同名主题曲。
                            </div>
                        </div>
                    </div>
                </div>
                <div class="index-con_concerttop">
                    <a href="../HTML/tour.html" class="index-con_concertword">CONCERT</a>
                    <a href="../HTML/tour.html" class="index-con_concertwordarrow">
                        <img src="../images/index/CONCERT/concert-arrow.png" alt="">
                    </a>
                </div>
                <div class="index-con_concert">
                    <svg width="1394" height="1603" viewBox="0 0 1394 1603" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <path d="M1390.5 1H973V410.608L502 410.5V786.5H5" stroke="white" stroke-width="2"
                            stroke-linecap="round" stroke-linejoin="round" />
                        <path d="M1 1601.5H505V1302H974.5V823H1392.5" stroke="white" stroke-width="2"
                            stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                </div>
                <div class="index-con_concert1">
                    <img src="../images/index/CONCERT/concert1.png" class="index-con_concert1pic"></img>
                    <div class="index-con_concertword1">
                        <div class="index-con_concert1date">2021.11.23 香港</div>
                        <div class="index-con_concert1title1">触感·色彩共融慈善音乐会</div>
                        <div class="index-con_concert1title2">陈奕迅 / 香港共融乐团</div>
                        <div class="index-con_concert1intro">主打「伤健共融」，由致力推动伤健人士发展音乐才能的共融乐团举办，门票不作发售，将分別贈送予慈善团体、傷残人士...
                        </div>
                    </div>
                </div>
                <div class="index-con_concert2">
                    <img src="../images/index/CONCERT/concert2.png" class="index-con_concert2pic"></img>
                    <div class="index-con_concertword2">
                        <div class="index-con_concert2date">2020.07.11 香港 (线上)</div>
                        <div class="index-con_concert2title1">Live is so much better with Music Eason Chan Charity
                            Concert </div>
                        <div class="index-con_concert2title2">陈奕迅 </div>
                        <div class="index-con_concert2intro">
                            举办这场演唱会的初衷，陈奕迅表示，疫情蔓延以来，全球演出行业受到重创，包括他在内的很多歌手都取消或延迟了巡演计划。他想为从业者们加油鼓劲。
                        </div>
                    </div>
                </div>
                <div class="index-con_concert3">
                    <img src="../images/index/CONCERT/concert3.png" class="index-con_concert3pic"></img>
                    <div class="index-con_concertword3">
                        <div class="index-con_concert3date">2018.10.27 香港</div>
                        <div class="index-con_concert3title1">L.O.V.E is L.I.F.E </div>
                        <div class="index-con_concert3title2">陈奕迅 / Duo Band</div>
                        <div class="index-con_concert3intro">
                            Eason and The Duo band 在中环摩天轮举办的露天慈善show，歌单囊括了两个月后新专的大部分歌曲，还有Yoyo的新歌《尽力呼吸》。
                        </div>
                    </div>
                </div>

            </div>
        </section>
    </div>

    <script src="../JS/footer.js"></script>
    </div>
    <script>
        // 首页翻转
        let indextop_pic1 = document.querySelector('.index-top_pic1');
        let indextop_pic2 = document.querySelector('.index-top_pic2');
        indextop_pic1.addEventListener('mouseover', function () {
            indextop_pic1.className = 'index-top_pic1 index-top_pic1over';
        })

        indextop_pic1.addEventListener('mouseleave', function () {
            indextop_pic1.className = 'index-top_pic1 index-top_pic1leave';
        })

        indextop_pic2.addEventListener('mouseover', function () {
            indextop_pic2.className = 'index-top_pic2 index-top_pic2over';
        })

        indextop_pic2.addEventListener('mouseleave', function () {
            indextop_pic2.className = 'index-top_pic2 index-top_pic2leave';
        })

        // 专辑线段特效
        let indexcon_album = document.querySelector('.index-con_album');
        let album_paths = indexcon_album.getElementsByTagName('path');

        document.addEventListener('DOMContentLoaded', function () {
            let path, length;
            let indexline = function (paths) {
                for (var i = 0, len = paths.length; i < len; i++) {
                    path = album_paths[i];
                    length = path.getTotalLength() + 10;
                    path.setAttribute('stroke-dasharray', length);
                    path.setAttribute('stroke-dashoffset', length);

                    // (function (path) {
                    //     path.addEventListener('animationend', function () {
                    //         path.setAttribute('stroke-dashoffset', 0);
                    //     });
                    // })(path);
                }
            }
            indexline(album_paths);
            indexcon_album.addEventListener('mouseenter', function () {
                for (let i = 0; i < album_paths.length; i++) {
                    album_paths[i].style.animation = 'begin 500ms linear forwards';
                }
            })

            indexcon_album.addEventListener('mouseleave', function () {
                for (let i = 0; i < album_paths.length; i++) {
                    album_paths[i].style.animation = 'albumover 500ms linear forwards';
                }
            })

        });
        // 巡演线段特效
        let indexcon_concert = document.querySelector('.index-con_concert');
        let indexcon_concert1 = document.querySelector('.index-con_concert1');
        let indexcon_concert2 = document.querySelector('.index-con_concert2');
        let indexcon_concert3 = document.querySelector('.index-con_concert3');
        let paths = indexcon_concert.getElementsByTagName('path');


        document.addEventListener('DOMContentLoaded', function () {
            let path, length;
            let indexline = function (paths) {
                for (var i = 0, len = paths.length; i < len; i++) {
                    path = paths[i];
                    length = path.getTotalLength() + 10;
                    path.setAttribute('stroke-dasharray', length);
                    path.setAttribute('stroke-dashoffset', length);

                    // (function (path) {
                    //     path.addEventListener('animationend', function () {
                    //         path.setAttribute('stroke-dashoffset', 0);
                    //     });
                    // })(path);
                }
            }
            indexline(paths);

            indexcon_concert1.addEventListener('mouseenter', function () {
                for (let i = 0; i < paths.length; i++) {
                    paths[i].style.animation = 'begin 500ms linear forwards';
                }
            })

            indexcon_concert1.addEventListener('mouseleave', function () {
                for (let i = 0; i < paths.length; i++) {
                    paths[i].style.animation = 'over 500ms linear forwards';
                }
            })

            indexcon_concert2.addEventListener('mouseenter', function () {
                for (let i = 0; i < paths.length; i++) {
                    paths[i].style.animation = 'begin 500ms linear forwards';
                }
            })

            indexcon_concert2.addEventListener('mouseleave', function () {
                for (let i = 0; i < paths.length; i++) {
                    paths[i].style.animation = 'over 500ms linear forwards';
                }
            })

            indexcon_concert3.addEventListener('mouseenter', function () {
                for (let i = 0; i < paths.length; i++) {
                    paths[i].style.animation = 'begin 500ms linear forwards';
                }
            })

            indexcon_concert3.addEventListener('mouseleave', function () {
                for (let i = 0; i < paths.length; i++) {
                    paths[i].style.animation = 'over 500ms linear forwards';
                }
            })
        });


        // 新闻长方形特效
        let indexcon_news1all = document.querySelector('.index-con_news1all');
        let indexnews1rect = indexcon_news1all.querySelectorAll('rect');
        indexcon_news1all.addEventListener('mouseenter', function () {
            indexnews1rect[0].style.display = 'block';
            setTimeout(function () {
                indexnews1rect[1].style.display = 'block';
            }, 50)
            setTimeout(function () {
                indexnews1rect[2].style.display = 'block';
            }, 100)
        });
        indexcon_news1all.addEventListener('mouseleave', function () {
            indexnews1rect[2].style.display = 'none';
            setTimeout(function () {
                indexnews1rect[1].style.display = 'none';
            }, 50)
            setTimeout(function () {
                indexnews1rect[0].style.display = 'none';
            }, 100)
        })

        let indexcon_news2all = document.querySelector('.index-con_news2all');
        let indexnews2rect = indexcon_news2all.querySelectorAll('rect');
        indexcon_news2all.addEventListener('mouseenter', function () {
            indexnews2rect[0].style.display = 'block';
            setTimeout(function () {
                indexnews2rect[1].style.display = 'block';
            }, 50)
            setTimeout(function () {
                indexnews2rect[2].style.display = 'block';
            }, 100)
        });
        indexcon_news2all.addEventListener('mouseleave', function () {
            indexnews2rect[2].style.display = 'none';
            setTimeout(function () {
                indexnews2rect[1].style.display = 'none';
            }, 50)
            setTimeout(function () {
                indexnews2rect[0].style.display = 'none';
            }, 100)
        })

        let indexcon_news3all = document.querySelector('.index-con_news3all');
        let indexnews3rect = indexcon_news3all.querySelectorAll('rect');
        indexcon_news3all.addEventListener('mouseenter', function () {
            indexnews3rect[0].style.display = 'block';
            setTimeout(function () {
                indexnews3rect[1].style.display = 'block';
            }, 50)
            setTimeout(function () {
                indexnews3rect[2].style.display = 'block';
            }, 100)
        });
        indexcon_news3all.addEventListener('mouseleave', function () {
            indexnews3rect[2].style.display = 'none';
            setTimeout(function () {
                indexnews3rect[1].style.display = 'none';
            }, 50)
            setTimeout(function () {
                indexnews3rect[0].style.display = 'none';
            }, 100)
        })
    </script>
    <script src="../mouse.js"></script>
</body>

</html>